<template>
  <div id="my-article">
    <div class="div-breadcrumb">
      <el-card>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/statistics/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>文章列表</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="center-query-form">
      <el-card>
        <el-row>
          <el-col :span="24">
            <el-form :inline="true" :model="queryForm" ref="queryForm" class="query-form-inline" size="mini">
              <el-form-item label="标题" prop="title">
                <el-input v-model="queryForm.title" placeholder="文章标题"></el-input>
              </el-form-item>
              <el-form-item label="标签" prop="tagIds">
                <el-select v-model="queryForm.tagIds" placeholder="文章标签">
                  <el-option v-for="tag in tagList" :key="tag.id" :label="tag.name" :value="tag.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="轮播" prop="isCarousel">
                <el-select v-model="queryForm.isCarousel" placeholder="是否轮播">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="推荐" prop="isRecommend">
                <el-select v-model="queryForm.isRecommend" placeholder="是否推荐">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="置顶" prop="isTop">
                <el-select v-model="queryForm.isTop" placeholder="是否置顶">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="作者" prop="author">
                <el-input v-model="queryForm.author" placeholder="文章作者"></el-input>
              </el-form-item>
              <el-form-item label="分类" prop="categoryId">
                <el-select v-model="queryForm.categoryId" placeholder="文章分类">
                  <el-option v-for="item in articleCategoryList" :key="item.id" :value="item.id" :label="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否原创" prop="isOriginal">
                <el-select v-model="queryForm.isOriginal" placeholder="是否原创">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit()">查询</el-button>
                <el-button @click="resetForm('queryForm')">重置</el-button>
                <el-button type="primary" @click="add()">新增</el-button>
                <el-button type="primary" @click="batchDel()">批量删除</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <div class="center-table">
      <el-card>
        <el-row>
          <el-col :span="24">
            <el-table :data="tableData" stripe border size="mini" class="article-table1"
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column label="编号" align="center" fixed="left">
                <template slot-scope="scop">
                  {{ scop.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="id" label="文章id" width="50" align="center" v-if="false">
              </el-table-column>
              <el-table-column prop="title" label="标题" width="180" align="center" fixed="left"
                :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="author" label="作者" width="150" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="cover" label="封面" width="150" align="center">
                <template slot-scope="scope">
                  <el-image style="width: 60px; height: 30px;line-height: 40px;margin: 0px;padding: 0px;"
                    :src="scope.row.cover" @click="bigImg(scope.row.cover)" :preview-src-list="srcList">
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column prop="shortLine" label="简介" width="250" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="content" label="内容" width="250" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="categoryId" label="文章分类ID" width="50" align="center" v-if="false">
              </el-table-column>
              <el-table-column prop="categoryName" label="分类" width="120" align="center">
              </el-table-column>
              <el-table-column prop="countScan" label="浏览数" width="100" align="center">
              </el-table-column>
              <el-table-column label="轮播" width="120" align="center">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.isCarousel" active-color="#13ce66" inactive-color="#a6a6a6"
                    @change="handleCarouselStatusChange(scope.row)">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column label="推荐" width="120" align="center">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.isRecommend" active-color="#13ce66" inactive-color="#a6a6a6"
                    @change="handleRecommendStatusChange(scope.row)">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column label="原创" width="120" align="center">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.isOriginal" active-color="#13ce66" inactive-color="#a6a6a6"
                    @change="handleOriginalStatusChange(scope.row)">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column label="置顶" width="120" align="center">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.isTop" active-color="#13ce66" inactive-color="#a6a6a6"
                    @change="handleTopStatusChange(scope.row)">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column prop="tagIds" label="标签id" width="80" align="center" v-if="false">
              </el-table-column>
              <el-table-column label="标签" width="120" align="center">
                <template slot-scope="scope">
                  <el-tag v-for="tag in scope.row.tags" :key="tag.id" :type="tag.type">
                    {{ tag.name }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="180" align="center" sortable>
              </el-table-column>
              <el-table-column label="操作" width="150" align="center" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="edit(scope.row.id)">
                  </el-button>
                  <el-popconfirm title="这是一段内容确定删除吗？" @confirm="del(scope.$index, scope.row)">
                    <el-button size="mini" type="danger" icon="el-icon-delete" circle slot="reference"></el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <div class="center-pagination">
      <el-card>
        <el-row>
          <el-col :span="24">
            <el-pagination background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" :current-page="pagination.current" :page-sizes="[10, 20, 50, 100]"
              :page-size="pagination.size" :total="pagination.total">
            </el-pagination>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
    articleUpdate,
    articlePageList,
    articleDeletes,
    articleCategoryQueryList,
    articleTagList
} from '@/api/article'

import {
    Message
} from 'element-ui'

export default {
    name: 'my-article',
    data () {
        return {
            queryForm: {
                title: null,
                author: null,
                isCarousel: '',
                isRecommend: '',
                isOriginal: '',
                isTop: '',
                categoryId: null,
                tagIds: null,
                current: 1,
                size: 10
            },
            tableData: [],
            pagination: {
                current: 1,
                size: 10,
                total: 0
            },
            srcList: [],
            articleCategoryList: [],
            tagList: [],
            selectedIds: []
        }
    },
    filters: {
        ellipsis (value, count) {
            if (!value) return ''
            if (value.length > count) {
                return value.slice(0, count) + '...'
            }
            return value
        }
    },
    methods: {
        // 查询
        onSubmit () {
            let params = {
                title: this.queryForm.title,
                author: this.queryForm.author,
                isCarousel: this.queryForm.isCarousel,
                isRecommend: this.queryForm.isRecommend,
                isOriginal: this.queryForm.isOriginal,
                categoryId: this.queryForm.categoryId,
                isTop: this.queryForm.isTop,
                tagIds: this.queryForm.tagIds,
                current: this.queryForm.current,
                size: this.queryForm.size
            }
            articlePageList(params).then((response) => {
                this.tableData = response.data.list
                this.pagination.total = response.data.total
                this.pagination.current = response.data.current
                this.pagination.size = response.data.size
            })
        },
        // 新增弹框
        add () {
            this.$router.push('/articleAdd')
        },

        // 编辑
        edit (articleId) {
            this.$router.push({
                path: 'articleUpd',
                query: {
                    'articleId': articleId,
                    'current': this.queryForm.current,
                    'size': this.queryForm.size
                }
            })
        },
        // 删除
        del (index, row) {
            let params = []
            params.push(row.id)
            articleDeletes(params).then((response) => {
                if (response != null && response.code === 200) {
                    Message.success({
                        message: response.message
                    })
                } else {
                    Message.warning({
                        message: response.message
                    })
                }
            })
            this.onSubmit()
        },
        // 切换每页条数
        handleSizeChange (size) {
            this.queryForm.size = size
            let params = {
                title: this.queryForm.title,
                author: this.queryForm.author,
                isCarousel: this.queryForm.isCarousel,
                isRecommend: this.queryForm.isRecommend,
                isOriginal: this.queryForm.isOriginal,
                categoryId: this.queryForm.categoryId,
                isTop: this.queryForm.isTop,
                tagIds: this.queryForm.tagIds,
                current: this.queryForm.current,
                size: this.queryForm.size
            }
            articlePageList(params).then((response) => {
                this.tableData = response.data.list
                this.pagination.total = response.data.total
                this.pagination.current = response.data.current
                this.pagination.size = response.data.size
            })
        },
        // 切换页码
        handleCurrentChange (current) {
        // 回设值
            this.queryForm.current = current
            let params = {
                title: this.queryForm.title,
                author: this.queryForm.author,
                isCarousel: this.queryForm.isCarousel,
                isRecommend: this.queryForm.isRecommend,
                isOriginal: this.queryForm.isOriginal,
                categoryId: this.queryForm.categoryId,
                isTop: this.queryForm.isTop,
                tagIds: this.queryForm.tagIds,
                current: this.queryForm.current,
                size: this.queryForm.size
            }
            articlePageList(params).then((response) => {
                if (response && response.code === 200) {
                    this.tableData = response.data.list
                    this.pagination.total = response.data.total
                    this.pagination.current = response.data.current
                    this.pagination.size = response.data.size
                } else {
                    Message.warning({
                        message: response.message
                    })
                }
            })
        },
        // 推荐开关
        handleRecommendStatusChange (row) {
            articleUpdate({
                id: row.id,
                isRecommend: row.isRecommend
            }).then((response) => {
                if (response && response.code === 200) {
                    Message.success({
                        message: response.message
                    })
                    this.handlerSearchSubmit()
                } else {
                    Message.warning({
                        message: response.message
                    })
                }
            })
        },
        // 原创开关
        handleOriginalStatusChange (row) {
            articleUpdate({
                id: row.id,
                isOriginal: row.isOriginal
            }).then((response) => {
                if (response && response.code === 200) {
                    Message.success({
                        message: response.message
                    })
                    this.handlerSearchSubmit()
                } else {
                    Message.warning({
                        message: response.message
                    })
                }
            })
        },
        // 原创开关
        handleTopStatusChange (row) {
            articleUpdate({
                id: row.id,
                isTop: row.isTop
            }).then((response) => {
                if (response && response.code === 200) {
                    Message.success({
                        message: response.message
                    })
                    this.handlerSearchSubmit()
                } else {
                    Message.warning({
                        message: response.message
                    })
                }
            })
        },
        // 轮播开关
        handleCarouselStatusChange (row) {
            articleUpdate({
                id: row.id,
                isCarousel: row.isCarousel
            }).then((response) => {
                if (response && response.code === 200) {
                    Message.success({
                        message: response.message
                    })
                    this.handlerSearchSubmit()
                } else {
                    Message.warning({
                        message: response.message
                    })
                }
            })
        },
        // 重置表单
        resetForm (formName) {
            this.$refs[formName].resetFields()
            this.queryForm.size = 10
            this.queryForm.current = 1
            this.onSubmit()
        },
        bigImg (url) {
            this.srcList = []
            this.srcList.push(url)
        },

        handleSelectionChange (selection) {
            this.selectedIds = selection.map((item) => item.id)
        },
        batchDel () {
            if (this.selectedIds != null && this.selectedIds.length > 0) {
                // 删除
                articleDeletes(this.selectedIds).then((response) => {
                    if (response != null && response.code === 200) {
                        Message.success({
                            message: response.message
                        })
                    } else {
                        Message.warning({
                            message: response.message
                        })
                    }
                })
                this.onSubmit()
            } else {
                Message.warning({
                    message: '请最少选择一个被删除对象！'
                })
                return false
            }
        }
    },
    mounted () {
        // 加载标签数据
        articleTagList().then((response) => {
            let data = response.data
            this.tagList = data
        })
        // 加载分类数据
        articleCategoryQueryList({
            enabled: true
        }).then((response) => {
            let data = response.data
            this.articleCategoryList = data
        })

        var current = this.$route.query.current
        var size = this.$route.query.size
        this.queryForm.current = current || 1
        this.queryForm.size = size || 10
        console.log('current', current)
        console.log('size', size)
        // 加载文章数据
        this.onSubmit()
    }
}
</script>

<style scoped>
  #my-article {
    width: 100%;
    height: auto;
  }

  .div-breadcrumb {
    margin: 20px 30px 0px 30px;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  /* center */
  .center {
    margin: 10px;
  }

  /* 搜索表单 */
  .center-query-form {
    margin: 0px 30px 0px 30px;
  }

  /* 表格 */
  .center-table {
    margin: 0px 30px 0px 30px;
  }

  .article-table {
    width: 100%;
  }

  /* 分页 */
  .center-pagination {
    margin: 0px 30px 20px 30px;
    text-align: center;
  }

  /* dialog */
  .aboutDialog {
    height: auto;
    text-align: left;
  }

  .aboutDialog>>>.el-dialog__body {
    padding: 15px 15px 15px 0px !important;
  }

  .aboutDialog>>>.el-dialog__header {
    padding: 10px 20px;
    height: 25px;
    line-height: 25px;
    text-align: left;
    background: #3378df;
    border-bottom: solid 1px #3378df;
  }

  .aboutDialog>>>.el-dialog__title {
    color: #fff;
    font-size: 14px;
  }

  .aboutDialog>>>.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }

  .aboutDialog>>>.el-dialog__header btn:hover .el-dialog__close {
    color: #fff;
  }

  .aboutDialog>>>.el-dialog__header btn {
    top: 13px;
  }

  .aboutDialog>>>.el-dialog__footer {
    padding: 10px 20px;
    border-top: solid 1px #3378df;
  }
</style>
